<template>
  <div class="myfavorite">
       <div class="box1">
        <h1>My favorite songs</h1>
        <div class="list">
            <div class="left">
                <ul>
                    <li v-for="(iteam,index) in this.$store.state.myfavoriteSongList" 
                    :key="index"
                     @click="getanimate(iteam.id,iteam.artists[0].id,iteam)"

                     >
                        <b></b>
                        <span>{{iteam.name}}</span>
                        <em></em>

                        <a></a> 
                        <a></a>
                        
                     </li>
                </ul>
            </div>
            <div class="right">
                <div class="animate">
                    <div class="touxiang">
                        <img :src="srcpic" alt="">
            
                    </div>
                    <h4>歌曲：{{songnname}}</h4>
                       <!-- 获取歌手描述 -->
                    <span>作者：{{artists}}</span>
                </div>
                <div class="pinglun">
                    <h3>热评</h3>
                    <ul>
                      <li v-for='(iteam,index) in hotComments' :key="index">
                            <div class="user">
                                <img :src="iteam.user.avatarUrl" alt="">
                                <em class='name'>{{iteam.user.nickname}}</em>
                            </div>
                            <span>{{iteam.content}}</span>
                        </li>
                    </ul>
                </div>
            </div>
            
        </div>
        <div class="bottom">
                <audio :src="url" autoplay controls></audio>
                 <el-button 
                @click="drawer = true" 
                type="primary" 
                style="margin-left: 16px;">
                歌词
                </el-button>

                 <el-drawer
                title="歌词"
                :visible.sync="drawer"
                :with-header="false">
                <span>
                     <h3>歌词</h3>
            <ul>
                <!-- <li v-for="(item,index) in lyric" :key="index">{{item.content}}</li> -->
                <li v-for="(item,index) in this.$store.state.lyric" :key="index">{{item.content}}</li>
            </ul>
          
                </span>
                </el-drawer>
        </div>
    </div>
     
  </div>
</template>

<script >
import axios from 'axios'
 import $ from "jquery"
export default {
name:"MyFavorite",
data(){
    return{
    // myfavorite:[],
    srcpic:"",//img 路径
  
   url:'',//audio  store
    hotComments:[],
    artists:'' ,  // 获取歌手描述
    songnname:'',
    //歌词
     lyric:[],
      restext:[],
      //ui
      drawer: false,
    }
},
methods:{
    //初始化
    getsongs(){
              var that =this;


 axios.get("http://localhost:3000/login?email=duwan527@163.com&password=13023058635%")
       .then(function(res){
         console.log(res);
                
                // axios.get("http://localhost:3000/likelist?uid=1759277956")
                //     .then(function(res){
                //         console.log('ggggggggggggggggggggggggggggg');
                //          console.log(res);   
                //     },
                //     function(erro){
                //     console.log(erro);
                //     });
            
       },
       function(erro){
            console.log(erro);
       });
//用户id 1759277956
//我喜欢的  暂未实现
// axios.get('http://localhost:3000/likelist?uid=1759277956').then(
//     function(res){
//         console.log(res);
//     },function(error){
//         console.log(error);
//     }
// );
//初始化表单
    axios.get("http://localhost:3000/search?keywords=毛不易")
       .then(function(res){
           console.log(res);
            // console.log(res.data.result.songs[0].artists[0].id);  //歌手id 
            // console.log(res.data.result.songs.name);//歌曲名称 
            //   console.log(res.data.result.songs[0].artists[0].name); 
            that.songnname='像我这样的人';
            //   that.artists=res.data.result.songs[0].artists[0].name;   //作者
            //  that.srcpic=res.data.result.songs[0].album.__ob__.value.artist.img1v1Url;    //图片地址
         that.srcpic='https://p2.music.126.net/9Tm64FK0P01acRW54FH34g==/109951165211406094.jpg';
            // that.myfavorite=res.data.result.songs; 
            //vuex初始化歌单
           that.$store.dispatch('amyfavoriteGetSongList'); 
        //    this.$store.dispatch('amyfavoriteGetSongList');
           
            
       },
       function(erro){
            console.log(erro);
       });
   // 初始化获取歌手描述    
 axios.get("http://localhost:3000/artist/desc?id=12138269" ).then(
            function(res){
                // console.log(res.data.briefDesc);
               that.artists=res.data.briefDesc;
            },function(error){
            console.log(error);
            }
        );

 //热评初始化
        axios.get('http://localhost:3000/comment/hot?type=0&id=569213220')
                    .then(function(res) {
           
                        that.hotComments = res.data.hotComments;

                    }, function(error) {
                        console.log(error);
                    });



    },
    
    getanimate(x,y,iteam){
          var that =this;
          this.songnname=iteam.name;
          //传歌曲id给vuex
          this.$store.commit('getmfid', x);
          
      //获取图片URL 
        axios.get("http://localhost:3000/song/detail?ids="+x)
     
        .then(function(res){
            //  console.log(res);
                // console.log(res.data.songs[0].al.picUrl);
                that.srcpic=res.data.songs[0].al.picUrl;
        },function(erro){
               console.log(erro);
        });
   
       
//歌曲url获取接口
        axios.get('http://localhost:3000/song/url?id=' + x)
                    .then(function(res) {
                        // console.log(res);
                        that.url = res.data.data[0].url;
                    }, function(error) {
                        console.log(error);
                    });
// ------------- ------歌词-------------------------------------------
                    //传值给lyric歌词
                    //传歌曲id id=1334270281
     axios.get("http://localhost:3000/lyric?id="+x)
     .then(function(res){
                //   console.log(that.songid);    1334270281
                //获取歌词
                    that.restext=res.data.lrc.lyric;
                    // console.log("ccccccccccccccccccccccc");
                    // console.log(res.data.lrc);
                   let restexts=that.restext;
               //按行分割歌词    
     function parseLyric(restexts) {
            let lyricArr = restexts.split('\n');
            //console.log(lyricArr)//0: "[ti:七里香]" "[ar:周杰伦]"...
            let result = []; //新建一个数组存放最后结果
            //遍历分割后的歌词数组，将格式化后的时间节点，歌词填充到result数组
           
            for (let i = 0; i < lyricArr.length; i++) {
                let playTimeArr = lyricArr[i].match(/\[\d{2}:\d{2}((\.|:)\d{3})\]/g); //正则匹配播放时间
                let lineLyric = "";
                // console.log("ccccccccccccccccccccccc");
                // console.log( playTimeArr);
                if (lyricArr[i].split(playTimeArr).length > 0) {
                    lineLyric = lyricArr[i].split(playTimeArr);
                }

                if (playTimeArr != null) {
                    for (let j = 0; j < playTimeArr.length; j++) {
                        let time = playTimeArr[j].substring(1, playTimeArr[j].indexOf("]")).split(":");
                        //数组填充
                        result.push({
                            time: (parseInt(time[0]) * 60 + parseFloat(time[1])).toFixed(4),
                            content: String(lineLyric).substr(1)
                        });
                    }
                }
            }
            return result;
        }
         // 把生成的数据显示到界面上去  
        that.lyric= parseLyric(restexts); //执行lyc解析  
            console.log("ffffffffffffffffffffff");
            // console.log(that.lyric);
              // ----------------------------------------？

 //传给vuex lyric
        // console.log("88888888888888888888888888888");
        // console.log(that.lyric);
        console.log(that.restext);
        that.$store.commit('mgetlyric', that.lyric,that.restext);

// --------------------------------- -------------------------------------------------
           let audio = document.querySelector('audio');

        let lineNo = 0; // 当前行歌词
        let preLine = 6; // 当播放6行后开始滚动歌词
        let lineHeight = -30; // 每次滚动的距离
        let $ul=$("ul");
        // 滚动播放 歌词高亮  增加类名active
        function highLight() {
            let $li = $("li");
            $li.eq(lineNo).addClass("active").siblings().removeClass("active");
            if (lineNo > preLine) {
                $ul.stop(true, true).animate({ top: (lineNo - preLine) * lineHeight });
            }
        }

        highLight();

        // 播放的时候不断渲染
        audio.addEventListener("timeupdate", function() {
            if (lineNo == that.lyric.length) return;
            if ($("li").eq(0).hasClass("active")) {
                $("ul").css("top", "0");
            }
            lineNo =getLineNo(audio.currentTime);
            highLight();
            lineNo++;
        });

        // 当快进或者倒退的时候，找到最近的后面那个result[i].time
        function getLineNo(currentTime) {
            if (currentTime >= parseFloat(that.lyric[lineNo].time)) {
                // 快进
                for (let i = that.lyric.length - 1; i >= lineNo; i--) {
                    if (currentTime >= parseFloat(that.lyric[i].time)) {
                        return i;
                    }
                }
            } else {
                // 后退
                for (let i = 0; i <= lineNo; i++) {
                    if (currentTime <= parseFloat(that.lyric[i].time)) {
                        return i - 1;
                    }
                }
            }
        }

        //播放结束自动回到开头
        audio.addEventListener("ended", function() {
            lineNo = 0;
            highLight();
            audio.play();
            $("ul").css("top", "0");
        });
      

              },function(error){
                    console.log(error);
              }
          );
       
     

       //热评
        axios.get('http://localhost:3000/comment/hot?type=0&id=' +x)
                    .then(function(res) {
            //    console.log(x);
                // console.log(res);
                        that.hotComments = res.data.hotComments;

                    }, function(error) {
                        console.log(error);
                    });
                    

// 获取歌手描述

// 说明 : 调用此接口 , 传入歌手 id, 可获得歌手描述

// 必选参数 : id: 歌手 id

// 接口地址 : /artist/desc

// 调用例子 : /artist/desc?id=6452 ( 周杰伦 )     /artist/detaildetail?id=11972054

        axios.get("http://localhost:3000/artist/desc?id=" +y).then(
            function(res){
                // console.log(res.data.briefDesc);
               that.artists=res.data.briefDesc;
            },function(error){
            console.log(error);
            }
        );
     //给父级传递参数
 
     that.$emit('songid',x,that.url);
     
       
    },
    
},
mounted:function(){
   this.getsongs();
    
     }

}
</script>

<style scoped>
.myfavorite{
    margin-top: 10px;
}
.box1 {
    width: 100%;
    height: 800px;
    background-image: linear-gradient(-45deg, rgb(142, 142, 255), rgb(133, 255, 133));
    margin: auto;
  }
.box1 h1{
    text-align: center;
    height: 50px;
}

.list{
    height:690px;
    display: flex;
    flex-direction: row;
}
.list .left{
    flex: 1;
  
    overflow: auto;
}
.list .left ul{
    margin-left: 50px;
    margin-top: 30px;
    margin-right: 30px;
     margin-bottom: 30px;
    
}
.list .left ul li{
    height: 30px;
    line-height: 30px;
    padding-left: 10px;
}
.list .left ul li:nth-child(2n-1){
   background-color: rgba(141, 232, 255, 0.8);
}
/* --------------------------------------------- */
.list .left ul li b {
    display: inline-block;
    transform: translate(5px, 3px);
    width: 17px;
    height: 17px;
    background-image: url(../assets/table.png);
    background-position: -20px -128px;
    background-repeat: no-repeat;
    margin-right: 10px;
}

.list .left ul li em {
    display: inline-block;
    transform: translate(5px, 3px);
    width: 23px;
    height: 17px;
    background-image: url(../assets/table.png);
    background-position: 0px -151px;
    background-repeat: no-repeat;
    
}

.list .left ul li span {
    line-height: 30px;
    padding-left: 8px;
  
}
.list .left ul li a{
     font-family: 'icomoon';
     float: right;
     padding-right: 15px;
     display:none;
}
.list .left ul li:hover a{
display: block;
}
/* ------------------------------------------ */
.list .right{
      flex: 1;
      display: flex;
      flex-direction: row;
      
}
.animate{
 flex: 1;
 
}
.animate h4{
    font-size: 16px;
    padding: 10px;

}
.animate span{
    overflow: auto;
     padding: 10px;
}
.pinglun{
    flex: 1; 
    background-color: rgb(226, 255, 159);
    overflow: auto;
}
    .touxiang{
        width: 300px;
        height: 300px;
        background-color: rgb(174, 255, 67);
        margin:30px auto;
        border-radius: 50%;
        animation-name: move2;
        animation-iteration-count: infinite;
        animation-duration: 8s;
        animation-timing-function: linear;
        overflow: hidden;
    }
    @keyframes move2{
        0%{}
        100%{
            transform: rotate(360deg);
        }
    }
     .touxiang img{
          width: 300px;
          height: 300px; 
     }
 .box1 .bottom{
            height: 50px;
            width: 100%;
            margin: 0;
            padding: 0;
            position: relative;
  }
  .box1 .bottom audio{
        height: 50px;
            width: 90%;
            margin: 0;
            padding: 0;
            border: 0;
            line-height: 50px;
            position: absolute;
            top: 5px;
        
  }
  .el-button{
      float: right;
      display: block;
      
      margin-right: 30px;
      margin-top: 10px;

      
  }
.el-drawer span{
    display:block;
    background-color: rgb(228, 255, 194);
}
  .el-drawer ul{
       width: 100%;
       /* background-color: rgb(174, 255, 67); */
  }
  .el-drawer ul li{
      text-align: center;
  }
  /* ----------------------------- */
  .pinglun ul li {
    /* white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis; */
    padding-left: 5px;
    margin-top: 5px;
}

.pinglun ul li .user {
    width: 100%;
    height: 30px;
    white-space: nowrap;
    overflow-x: hidden;
    text-overflow: ellipsis;
}

.pinglun ul li .user img {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    vertical-align: middle;
    margin-left: 5px;
}

.pinglun ul li .user em {
    font-size: 14px;
    font-style: normal;margin-left: 5px;
}

.pinglun ul li span {
    font-size: 12px;
}
h3{
     margin-top: 10px;
     margin-bottom: 10px;
     text-align: center;
}

</style>>

